<template>
  <div class="edit_container">
    <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
    <div style="display: none">
      <el-upload
          class="upload-box"
          :action="BASE_API_URL + 'baseapi/wechart/uploadMerchantPushImg'"
          :data="requestData"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
      >
        <i class="upload-icon el-icon-ali-upload" ref="elUpload"></i>
      </el-upload>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Edit',
  props: {
    propContent: {
      type: String,
      default: ""
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  data(){
    return {
      // content: `<p>hello world</p>`,
      content: ``,
      editorOption: {
        placeholder: "请输入..."
      },
      requestData: {
        area: "planRemark"
      },
      imgUrl: "",
    }
  },
  watch: {
    "propContent": function (newV, oldV) {
      this.content = newV
    }
  },
  created() {
    if (this.propContent != "") {
      this.content = this.propContent
    }
    let _this = this
    const modules = {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'], // toggled buttons
          ['blockquote', 'code-block'],
          [{ header: 1 }, { header: 2 }], // custom button values
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
          [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
          [{ direction: 'rtl' }], // text direction
          [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }], // dropdown with defaults from theme
          [{ font: [] }],
          [{ align: [] }],
          ['link', 'image'],
          ['clean'] // remove formatting button
        ],
        handlers: {
          image: function(value) {
            // debugger
            _this.$refs.elUpload.click() //自定义图片上传回调
          }
        }
      },
      history: {
        delay: 1000,
        maxStack: 50,
        userOnly: false
      },
      imageDrop: true,
      imageResize: {
        displayStyles: {
          backgroundColor: 'black',
          border: 'none',
          color: 'white'
        },
        modules: ['Resize', 'DisplaySize', 'Toolbar']
      },
    }
    _this.editorOption.modules = modules
  },
  mounted() {
    if (!this.isEdit) {
      this.$refs.myQuillEditor.quill.enable(false)
    }
  },
  methods: {
    // 上传成功
    uploadSuccess(res, file) {
      if (res.code == 1) {
        //图片上传成功后返回值
        let { msg } = res
        let quill = this.$refs.myQuillEditor.quill
        let length = quill.getSelection().index　//获取当前鼠标焦点位置
        // 赋值
        quill.insertEmbed(length, 'image', msg)//插入<img src='url'/>
        quill.setSelection(length + 1)  //鼠标焦点位置
        this.$message.success("图片上传成功")
      }
    },
    // 最大上传大小
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!")
      }
      return isLt2M;
    },
    onEditorBlur(event){
      // console.log(this.content)
      // this.$emit("save-html", this.content)
    }, // 失去焦点事件
    onEditorFocus(event){ // 富文本获得焦点时的事件
      // event.enable(false) // 在获取焦点的时候禁用
      // console.log(val); // 富文本获得焦点时的内容
    },
    onEditorChange(event){
      this.$emit("save-html", this.content)
    }, // 内容改变事件
  }
}
</script>

<style scoped>
  .edit_container {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  ::v-deep .ql-editor{
    min-height: 150px;
  }
</style>
